import { useState } from 'react';
import { Menu, Button } from '@arco-design/web-react';
import { routerChildren } from '../router/Routerconfig'
import '../assets/Firstpage.moudle.css'
import { RouterItem } from '../e'
import {
    IconMenuFold,
    IconMenuUnfold,
    IconApps,
    IconBug,
    IconBulb,
    IconBook,
} from '@arco-design/web-react/icon';
const MenuItem = Menu.Item;
const SubMenu = Menu.SubMenu;
import { Layout } from '@douyinfe/semi-ui';
import { NavLink, Outlet } from 'react-router-dom';
const iconMap: Record<string, React.ComponentType> = {
    "IconMenuFold": IconMenuFold,

}
const Firstpage = () => {
    const { Header, Sider, Content } = Layout;
    const DynamicComponent: React.FC<{ componentName: keyof typeof iconMap }> = ({ componentName }) => {
        const IconComponent = iconMap[componentName];
        return <IconComponent />;
    };
    return (
      
        <Layout className="components-layout-demo" style={{ height: '100vh', overflow:"auto",width:"100vw"}}>
            
            <Header className='head'>
                <a href="https://store.eqxiu.com/"> <img src="https://lib.eqh5.com/eqx.layout/images/new_logo.svg" draggable={true} alt="易企秀" /></a>
                <ul>
                    <li><span>测试</span>
                        <div className="wrap">

                        </div>
                    </li>
                    <li>
                        <span>测试</span>
                        <div className="wrap">

                        </div>
                    </li>
                    <li>
                        <span>测试</span>
                        <div className="wrap">

                        </div>
                    </li>
                    <li>测试</li>
                    <li>测试</li>
                    <li>测试</li>
                </ul>
                <button>登录/注册
                      <img className='advan' src="../../public/advan.webp" alt="" />
                </button>
            </Header>

            <Layout style={{display:"flex",justifyContent:"space-around",marginTop:"70px"}}>
                <Sider style={{ width: '200px', height:"calc(100vh - 80px)",     background: 'var(--semi-color-fill-2)' }}>
                    <Menu
                        style={{ width: 200, borderRadius: 4, height: "100%" }}
                        theme='light'
                        defaultOpenKeys={['1']}
                        defaultSelectedKeys={['1']}
                    >
                        {routerChildren.map((i: RouterItem) => {
                            if (i.children) {
                                return <SubMenu
                                    key={i.key}
                                    title={
                                        <>
                                            <DynamicComponent componentName={i.icon} />{i.title}
                                        </>
                                    }
                                >

                                </SubMenu>
                            } else {
                                return <MenuItem key={i.key}>
                                    <DynamicComponent componentName={i.icon} />
                                    <NavLink to={i.path}>{i.title}</NavLink>
                                </MenuItem>
                            }

                        })}


                    </Menu>

                </Sider>
                <Content  style={{width:"1000px" ,overflow:"hidden"}}  >
                    <Outlet></Outlet>
                </Content>

            </Layout>
        </Layout>
    )
}

export default Firstpage
